<template>
  <div class="view-content">
    <table-form ref="table" v-bind="tableProps" @event="tableEvent" @select="tableSelect = $event">
      <el-form-item prop="input">
        <!-- 输入框 -->
        <el-input
          v-model="tableProps.model.input"
          type="text"
          placeholder="请输入xxx"
          clearable
        />
        <!-- 文本域 -->
        <el-input
          v-model="tableProps.model.input"
          type="textarea"
          :rows="2"
          placeholder="请输入xxx"
          clearable
        />
        <!-- 单选框 -->
        <el-radio-group v-model="tableProps.model.input">
          <el-radio :label="false">
            测试1
          </el-radio>
          <el-radio :label="true">
            测试2
          </el-radio>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group>
          <el-checkbox label="测试1" />
          <el-checkbox label="测试2" />
        </el-checkbox-group>
        <!-- 富文本 -->
        <tinymce v-model="tableProps.model.input" />
        <!-- 选择框 -->
        <el-select v-model="tableProps.model.input" placeholder="请选择" clearable>
          <el-option value="测试" />
        </el-select>
        <!-- 日期时间选择 -->
        <el-date-picker
          placeholder="开始时间"
          type="datetime"
          v-model="tableProps.model.input"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
        <!-- 级联选择框 -->
        <el-cascader
          :options="[]"
          v-model="tableProps.model.input"
          :props="{
            checkStrictly: true,
            value: 'code',
            label: 'name'
          }"
          placeholder="请选择"
          clearable
        />
      </el-form-item>
      <template #toolsRight>
        <el-button type="primary" :icon="Plus" @click="showAdd" v-permission="['tableform74872:add']">
          新增
        </el-button>
        <el-button
          type="info"
          :disabled="!tableSelect.length"
          :icon="Delete"
          @click="deletion"
          v-permission="['tableform74872:del']"
        >
          批量删除
        </el-button>
      </template>
    </table-form>
    <dialog-form v-model="formData.visible" :title="formData.id ? '编辑' : '新增'" :confirm="handleSubmit">
      <el-form :model="formData" ref="form" label-width="100px" :rules="formDataRules">
        <el-form-item label="字段1" prop="input">
          <el-input
            v-model="formData.input"
            type="text"
            placeholder="请输入xxx"
            clearable
          />
        </el-form-item>
      </el-form>
    </dialog-form>
  </div>
</template>

<script lang="ts" setup>
import { MenuProps, TableColumnsProps } from '@/components/Table/types/tableForm'
import { ref, nextTick } from 'vue'
import { checkPermission } from '@/utils/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons'

// 原始变量
const getInitialData = () => ({
  columns: [{
    label: '姓名',
    prop: 't1'
  }, {
    label: '身份证号',
    prop: 't2'
  }] as TableColumnsProps[],
  menus: [{
    name: '编辑',
    type: 'primary',
    event: 'edit',
    role: 'tableform74872:edit'
  }, {
    name: '删除',
    type: 'danger',
    event: 'del',
    role: 'tableform74872:del'
  }] as MenuProps[],
  searchForm: {
    input: ''
  },
  formData: {
    id: '',
    input: '',
    visible: false
  }
})
// 表格实例
const table = ref()
// 表格选中数据
const tableSelect = ref < any[] >([])
// 表格加载方法
const load = async (form: any = {}) => {
  console.log(form)
  // 返回获取列表接口
  return [{ t1: 'xxx', t2: '6501****' }]
}
// tableForm属性
const tableProps = ref({
  load,
  columns: getInitialData().columns,
  menus: getInitialData().menus,
  model: getInitialData().searchForm,
  selection: checkPermission(['tableform74872:del']),
  formInline: true
})
// 表格操作栏事件
const tableEvent = async (event: MenuProps['event'], row: any) => {
  switch (event) {
    case 'edit':
      showAdd()
      Object.assign(formData.value, row)
      break
    case 'del':
      try {
        await ElMessageBox({
          title: '提示',
          message: '确定删除选中数据？',
          type: 'warning',
          showCancelButton: true,
          cancelButtonText: '取消',
          confirmButtonText: '确认',
          center: true
        })
        // 这里调用删除单挑数据接口
        ElMessage.success('删除成功')
        table.value.fetchData()
      } catch (e) {}
      break
  }
}
// 新增功能
const form = ref()
const formData = ref(getInitialData().formData)
const formDataRules = {
  input: [{ required: true, message: '请输入字段1', trigger: 'blur' }]
}
const showAdd = () => {
  Object.assign(formData.value, getInitialData().formData)
  formData.value.visible = true
  nextTick(() => {
    form.value?.clearValidate()
  })
}

// 批量删除
const deletion = async () => {
  await ElMessageBox({
    title: '提示',
    message: '确定删除选中数据？',
    type: 'warning',
    showCancelButton: true,
    cancelButtonText: '取消',
    confirmButtonText: '确认',
    center: true
  })
  // 这里调用删除接口
  ElMessage.success('删除成功')
  table.value.fetchData()
}

// 表单提交事件
const handleSubmit = async () => {
  const valid = await form.value?.validate()
  const params = formData.value
  if (!valid) return
  const data = {
    id: params.id as any
  }
  if (params.id) {
    // 调用编辑接口传递data
    ElMessage.success('编辑成功')
  } else {
    delete data.id
    // 调用新增接口传递data
    ElMessage.success('添加成功')
  }
  table.value.fetchData()
  formData.value.visible = false
}
</script>

<style lang="scss" scoped></style>
